<template>
    <div class="addDoctor-box">
        <div class="addDoctor-box-head">
            <span></span>
            {{ labelName }}医生信息
        </div>
        <div style="margin-bottom: 20px;">
            医生信息
        </div>
        <div>
            <div>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" :size="formSize" status-icon
                    class="addDoctor-form">
                    <div class="addDoctor-form-one">
                        <el-form-item label="医生编号">
                            <span>111111111111</span>
                        </el-form-item>
                        <el-form-item label="账号" prop="account" style="margin-left: 45px;">
                            <el-input v-model="ruleForm.account" placeholder="请输入有效手机号" style="width: 200px;"></el-input>
                            <!-- {{ ruleForm.account }} -->
                        </el-form-item>
                        <el-form-item label="医生头像" style="margin-right: 125px;border: none;">
                            <Upload @getPicUrl="getpic" :picture="pic" :flag="false"></Upload>
                        </el-form-item>
                    </div>
                    <div class="addDoctor-form-two">
                        <el-form-item label="医生姓名" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="请输入" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="医生角色" prop="roleId">
                            <el-select ref="selectRef" v-model="checkedCities" placeholder="请选择" style="width: 200px;"
                                multiple collapse-tags="true">
                                <el-option disabled value='qwe'>
                                    <template #default>
                                        <el-checkbox v-model="All" :indeterminate="isIndeterminate" @change="checkAll">
                                            全选</el-checkbox>
                                    </template>
                                </el-option>
                                <el-checkbox-group v-model="checkedCities" @change="check">
                                    <el-option v-for="(item, index) in doctorRoleList" :key="index" disabled
                                        :value='item.value' :label="item.label">
                                        <template #default>
                                            <el-checkbox :label="item.value" size="small">
                                                <span style="font-size: 12px;"> {{ item.label }}</span>
                                            </el-checkbox>
                                        </template>
                                    </el-option>
                                </el-checkbox-group>
                                <div style="height: 1px; border-top: 1px solid #ccc;"></div>
                                <div style="float: right; padding: 10px;">
                                    <el-link type="primary" @click="pass"
                                        style="font-size: 13px; margin-right: 10px;text-decoration: none;">确定</el-link>
                                    <el-link @click="out" style="font-size: 13px;text-decoration: none;">取消</el-link>
                                </div>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="登陆密码" prop="password">
                            <el-input v-model="ruleForm.password" placeholder="请输入" style="width: 200px;"></el-input>
                        </el-form-item>
                    </div>

                    <el-form-item label="性别" prop="gender" style="margin-bottom: 40px;">
                        <el-select v-model="ruleForm.gender" placeholder="请选择" style="width: 200px;">
                            <el-option label="男" value="男" />
                            <el-option label="女" value="女" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="医生简介" prop="description" style="margin-bottom: 40px;">
                        <el-input v-model="ruleForm.description" type="textarea" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="医生擅长" prop="adept" style="margin-bottom: 40px;">
                        <el-input v-model="ruleForm.adept" type="textarea" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item>
                        <el-button :plain="true" type="primary" @click="confirmAddDoctor(ruleFormRef)">保存</el-button>
                        <el-button><router-link style="color: black;text-decoration: none;"
                                to="/home/institution/ys">返回</router-link></el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref, reactive } from 'vue'
import addDoctorType from '@/types/adong/addDoctor'
import type { FormInstance, FormRules } from 'element-plus';
import Upload from '@/components/Upload.vue'
import api from '@/api'
import doctorRoleStore from '@/store/adong/doctorRole'
import { ElMessage } from 'element-plus'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router';

//状态机中取出存储的医生角色信息
const store = doctorRoleStore()
store.getAllRoleData()
const doctorRoleList = ref(store.doctorRoleList.map((item: any) => {
    return {
        label: item.name,
        value: item.id
    }
}
))
console.log('doctorRoleList', store.doctorRoleList);


const formSize = ref('default')




//表单内容
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<addDoctorType>({
    //ID
    id: '',
    //账号
    account: '',
    //姓名
    name: '',
    //医生角色
    roleId: '',
    //头像图片
    picture: '',
    //电话
    tel: '',
    //性别
    gender: '',
    //描述
    description: '',
    //擅长
    adept: '',
    //团队ID
    creatorId: '67e98bc0-ee1b-11ed-8459-c76f227caccc',
    //消息状态
    msgStatus: '',
    //状态
    status: '',
    //密码
    password: ''
})
//表单验证规则
const rules = reactive<FormRules<addDoctorType>>({
    account: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[35789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入医生姓名', trigger: 'blur' },
        {
            pattern: /^[\u4e00-\u9fa5]{2,4}$/,
            message: '请输入有效的姓名，长度在2到4个汉字之间',
            trigger: 'blur'
        }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
            pattern: /^.{6,12}$/,
            message: '密码长度应在6到12位之间',
            trigger: 'blur'
        }
    ],
    // roleId: [
    //     { required: true, message: '请选择医生角色', trigger: 'blur' },
    //     {
    //         pattern: /.*/,
    //         message: '密码长度应在6到12位之间',
    //         trigger: 'blur'
    //     }
    // ]

})

//图片上传
const getpic = (arg: string) => {
    console.log("eeeeeee", arg);
    ruleForm.picture = arg
}
const pic = ref({
    picure: ''
})

//控制全选
const All = ref(false)
const isIndeterminate = ref(false)
//选中的值
const checkedCities: any = ref([])

//选中
const check = (value: string[]) => {
    const checkedCount = value.length
    All.value = checkedCount === doctorRoleList.value.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < doctorRoleList.value.length

}
//全选
const checkAll = (val: boolean) => {
    isIndeterminate.value = false
    checkedCities.value = val ? doctorRoleList.value.map((item: any) => item.value) : []
    console.log(checkedCities.value);

}

//确定
function pass() {
    ruleForm.roleId = checkedCities.value.join(',')
    // this.$refs.selectRef.hide();
}
//取消
function out() {
    // this.$refs.selectRef.hide();
}

const labelName = ref('新增')

//表单验证提交
const confirmAddDoctor = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (ruleForm.id === '') {
                ruleForm.tel = ruleForm.account
                // ruleForm.roleId = checkedCities.value.join(',')
                console.log('ruleForm', ruleForm);
                const result = api.ysAdmin.addDoctorApi(ruleForm)
                console.log('新增医生', result);
                ElMessage({
                    message: '新增成功',
                    type: 'success',
                })
            } else {

                const result = api.ysAdmin.modifyDoctorApi(ruleForm)
                console.log("修改", result);
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
                formEl.resetFields()
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}

//医生主页传值进行修改
const route = useRoute()

onMounted(async () => {
    // console.log('66666666', route.query.id);
    if (route.query.id) {
        labelName.value = "修改"
        const result = await api.ysAdmin.getDoctorDetailsApi({ id: route.query.id })
        console.log(result.data.data);

        const sendModifyDoctorList = result.data.data
        // const sendModifyDoctorList = JSON.parse(route.query.data as any)
        console.log('66666666', sendModifyDoctorList);
        ruleForm.id = sendModifyDoctorList.id
        ruleForm.account = sendModifyDoctorList.tel
        ruleForm.name = sendModifyDoctorList.name
        checkedCities.value = [sendModifyDoctorList.roleId]
        ruleForm.picture = sendModifyDoctorList.picture
        pic.value.picure = sendModifyDoctorList.picture
        ruleForm.tel = sendModifyDoctorList.tel
        ruleForm.gender = sendModifyDoctorList.gender
        ruleForm.description = sendModifyDoctorList.description
        ruleForm.adept = sendModifyDoctorList.adept
        ruleForm.creatorId = sendModifyDoctorList.tid
        // ruleForm.msgStatus
        // ruleForm.status
        // ruleForm.password
        console.log('5555555', pic.value.picure);

    }

})
</script>

<style lang='scss' scoped>
.addDoctor-box {
    background-color: white;
    box-sizing: border-box;
    padding: 20px;

    .addDoctor-box-head {
        line-height: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba($color: black, $alpha: .1);
        margin-bottom: 20px;

        span {
            display: inline-block;
            width: 6px;
            height: 20px;
            background-color: #2984f8;
            border-radius: 3px;
            margin-bottom: -3px;
            margin-right: 8px;
        }

        font-size: 18px;
        font-weight: 500;
        color:rgba(51, 51, 51, 0.898039215686275);
    }

    .addDoctor-form {

        .addDoctor-form-one,
        .addDoctor-form-two {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 20px;
        }

    }
}
</style>